<template>
	<!--  联系我们页面  -->
	<div>
		<newHeader />
		<el-main>
			<el-row :gutter="20" style="min-height: 400px;margin: 0 auto;width: 1200px;">
				<el-col :span="11" style="margin-left: 10%;">
					<div>
						<p>
							<span style="font-size: 15px;font-weight: bold;color: #999999;">联系我们：</span>
							<br />
							<span style="font-size: 12px;margin-top: 30px;display: block;line-height: 200%;color: #8B4513;">
								1、我们很专业！<br />
								2、我们很专业！<br />
								3、新用户注册后的审核方式有三种：自动核准、邮件激活、需要管理员批准（即人工审核），详情可参考教程《如何设置用户注册后的审核方式》
							</span>
						</p>
					</div>
				</el-col>
				<el-col :span="9">
					<!--  填写联系方式页面  -->
					<div class="boxForLogin boxvisible">
						<el-form ref="formUserContants" label-position="left" :model="formUserContants" :rules="rulesUserContants" label-width="100px" size="mini"
						 class="demo-ruleForm">
							<!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 -->
							<el-form-item label="姓名" inline-message="true" prop="userName">
								<el-input v-model="formUserContants.userName"></el-input>
							</el-form-item>
							<el-form-item label="联系方式" inline-message="true" prop="phone">
								<el-input v-model="formUserContants.phone"></el-input>
							</el-form-item> 
							<el-form-item label="邮箱" inline-message="true" prop="email">
								<el-input v-model="formUserContants.email"></el-input>
							</el-form-item> 
							<el-divider></el-divider>
							<el-form-item label=" ">
								<el-button type="primary" size="small" @click="submitContact('formUserContants')">提交</el-button>
							</el-form-item>

						</el-form>

					</div>
 
				</el-col>

			</el-row>
		</el-main>

		<newFooter />
	</div>
</template>

<script>
	// 导入其他模板示例
	import newHeader from '../home/newheader.vue'
	import newFooter from '../home/newFooter.vue'
	export default {
		name: 'designers',
		components: {
			newHeader,
			newFooter
		},
		data() {
			var validateuserName = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入用户名'));
				} else {
					return callback( );
				}
			};
			var validateemail = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入邮箱'));
				} else {
					return callback( );
				}
			};
			var validatephone = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入联系方式'));
				} else {
					return callback( );
				}
			};
			return {
				tabsSure: [true, false, false, false],
				formUserContants: {
					userName: '',
					email: '', 
					phone: '', 
				},
				rulesUserContants: {
					userName: [{
						validator: validateuserName,
						trigger: 'blur'
					}],
					email: [{
						validator: validateemail,
						trigger: 'blur'
					}],
					phone: [{
						validator: validatephone,
						trigger: 'blur'
					}],
				},
			}
		},
		methods: {
			submitContact(formName){
				var that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
							console.log("提交联系内容-->"+JSON.stringify(that.formUserContants))
						// alert('提交!');
					} else {
						console.log('验证失败!');
						return false;
					}
				});
			},
		}
	}
</script>

<style>
	.el-col .boxForLogin{
		border-radius: 4px;
		border: 1px solid #eee;
		padding: 30px;
		display: block;
	}
	.el-col .boxvisible{ 
		display: block;
	}
</style>
